<%--
  Created by IntelliJ IDEA.
  User: 13437
  Date: 2023/8/25
  Time: 15:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>QQ 系统</title>
    <link rel="stylesheet" href="/static/plugins/layui2.7.6/css/layui.css">
    <style>
        img {
            width: 100%;
            height: 800px;
            box-shadow: darkgray;
        }

    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <%--头部与左侧样式--%>
    <jsp:include page="./commons/head.jsp"/>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">

            <div class="layui-carousel" id="imgs">
                <div carousel-item>
                    <div><img src="/static/image/1.webp" alt=""></div>
                    <div><img src="/static/image/2.jpg" alt=""></div>
                    <div><img src="/static/image/3.webp" alt=""></div>
                </div>
            </div>
        </div>

        <%--修改头像页面层--%>
        <div class="layui-upload"  style="display: none" id="updateFile">
            <button type="button" name="file" class="layui-btn" id="test1">上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo1" width="200px">
                <p id="demoText"></p>
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>


    </div>

    <%--引入底部样式--%>
    <jsp:include page="./commons/footer.jsp"/>
</div>

<script src="/static/plugins/layui2.7.6/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util', 'carousel','upload'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;
        var carousel = layui.carousel;
        var upload = layui.upload;

        $("#updateImg").click(function () {
            layer.open({
                type: 1,
                content: $('#updateFile'),
                title: '修改头像',
                area: ['680px', '500px'],
                btn: ['确定'],
                btnAlign: 'l',
                anim: 1,
                shade: 0,
                // 弹出之后回调
                success: function (layerNow,index) {
                    upload.render({
                        elem: '#test1'
                        ,url: '/admin/img' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                        ,before: function(obj){
                            //预读本地文件示例，不支持ie8
                            obj.preview(function(index, file, result){
                                // 上传图片显示图片
                                $('#demo1').attr('src', result); //图片链接（base64）
                            });

                            element.progress('demo', '0%'); //进度条复位
                            layer.msg('上传中', {icon: 16, time: 0});
                        }
                        ,done: function(res){
                            //如果上传失败
                            if(res.code > 0){
                                return layer.msg('上传失败');
                            }
                            //上传成功的一些操作
                            //……
                            $('#demoText').html(''); //置空上传失败的状态
                        }
                        ,error: function(){
                            //演示失败状态，并实现重传
                            var demoText = $('#demoText');
                            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                            demoText.find('.demo-reload').on('click', function(){
                                uploadInst.upload();
                            });
                        }
                        //进度条
                        ,progress: function(n, elem, e){
                            element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                            if(n == 100){
                                layer.msg('上传完毕', {icon: 1});
                            }
                        }
                    });
                },
                yes: function (index, layerNow) {
                    // 发送一个请求给后台, 让他重新查询此数据，把数据重新存入 Session 域 跳转 Index 页面
                    location.href = '/admin/reload';
                }
            })
        });





        // 加载轮播模块
        carousel.render({
            // 绑定指定盒子的 id
            elem: '#imgs',
            // 宽度
            width: '100%',
            height: '100%',
            // 显示上一张与下一张的箭头
            arrow: 'always',
            // 始终自动滚动，不受鼠标悬停影响
            autoplay: 'always',
            // 自动滚动的时间
            interval: 3000

        });


    });
</script>
</body>
</html>
